<template>
	<view class="credential">
		<view class="roof" :style="{background:color}">
			<view class="tabbar">
				<view class="item" @click="showtab=true">
					<view :class="{'active':showtab}">电子版证书</view>
					<image class="le" v-show="showtab" src="../../static/image/le.png"></image>
				</view>
				<view class="item" @click="showtab=false">
					<view :class="{'active':!showtab}">纸制版证书</view>
					<image class="ri" v-show="!showtab" src="../../static/image/ri.png"></image>
				</view>
			</view>
		</view>

		<view class="container">
			<view v-if="showtab" class="electronic">
				<view class="le">
					<view class="bor">
						<image src="../../static/image/bg.jpg"></image>
						<view class="name">{{Obj.realName}}：</view>
						<view class="works">{{Obj.certificate_text}}</view>
					</view>
					<view class="hint">注：电子版与纸质版均获得大赛组委会承认，仅领取电子版证书不影响进入决赛资格，纸质版证书领取以选手自愿原则付费留念。</view>
				</view>
			</view>
			<view v-if="!showtab" class="paper">
				<view class="certificate">
					<view class="bor">
						<image src="@/static/image/bg.jpg"></image>
						<view class="name">{{Obj.realName}}：</view>
						<view class="works">{{Obj.certificate_text}}
						</view>
					</view>
				</view>
				<view class="contain">
					<view class="cost">领取纸质版需支付 <view :style="{color}">{{Obj.paper_price}}元(已含邮费)</view> 制作及作品点评费，包含：</view>
					<view class="con_box">
						<view class="prize" v-for="(item,index) in Obj.paper_contain" :key="index">
							<image :src="item.img"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
					<view class="datu">
						<image :src="Obj.datu" alt="">
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view v-if="showtab" class="item">
				<view @click="drawCanvas" :style="{border:'2upx solid '+color,'color':color}">保存图片</view>
				<view :style="overallStyle" @click="showtab=false">领取纸质版</view>
			</view>
			<view @click="headleAddress" class="item1" :style="overallStyle" v-else>
				{{!Obj.is_submit?'纸质版领取已截止':'预计 3 个工作日完成制作'}}
			</view>
		</view>

		<!-- 海报 -->
		<view class="main">
			<view class="content">
				<canvas class="canvas" canvas-id="cardPoster" :style="[posterStyle]"></canvas>
			</view>
			<popup :show="show" type="middle" @close="handlerShow">
				<view class="poster-img">
					<image class="img" :src="posterImg" mode="widthFix" />
					<view :style="{color}">长按保存荣誉证书</view>
				</view>
			</popup>
		</view>
	</view>
</template>

<script>
	// import {
	// 	saveImageToPhotosAlbum,
	// 	showToast
	// } from '@/uni_modules/sakura-canvas/js_sdk/util'
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
	export default {
		data() {
			return {
				showtab: true,
				img: '/static/image/bg.jpg',
				posterStyle: {
					width: '10px',
					height: '10px'
				},
				posterImg: '',
				name: '周星星：',
				show: false,
				color: null,
				Obj: {},
				Rid: null,
				userphone: null
			}
		},

		onLoad(option) {
			this.showtab = option.state == 1 ? true : false
			this.Rid = option.id
			this.userphone = option.phone
			this.getData()
			this.$nextTick(() => {
				this.createdDraw()
			})
			// uni.removeStorageSync('hello')
		},

		onShow() {
			// this.getData()
		},

		computed: {
			overallStyle() {
				return {
					background: this.color,
					boxShadow: '0upx 0upx 4upx 0upx' + this.color
				}
			}
		},

		methods: {
			getData() {
				this.$myRequesy({
					url: 'chaxun/certificate',
					data: {
						id: this.Rid,
						phone: this.userphone
					}
				}).then(res => {
					if (res.code === 0) {
						this.color = res.data.color
						this.Obj = res.data
					}
				})
			},


			// 创建draw绘制对象
			createdDraw() {
				this.draw = new Draw({
					width: 690,
					height: 488,
					company: 'rpx',
					_this: this,
					canvasId: 'cardPoster',
				})
			},

			// 绘制内容
			async drawCanvas() {
				let {
					draw,
					img,
					Obj,
					line,
					name
				} = this
				let res = await draw.createdSharePoster(({
					ctxObj,
					style
				}) => {
					let {
						width,
						height
					} = ctxObj
					this.posterStyle = style
					// 距离x轴的距离
					let offsetX = 25
					// 商品图
					let goodsImg = {
						type: 'image',
						drawType: 'rect',
						src: img,
						r: 30,
						color: 'pink',
						callBack: (before) => {
							let {
								sx,
								w,
								sy
							} = before
							return {
								// x: sx + 14,
								// y: sy + 14,
								w: 690,
								h: 488
							}
						}
					}
					// 选手名字
					let goodsPrice = {
						type: 'text',
						text: Obj.realName,
						font: {
							size: 20
						},
						callBack: (before) => {
							let {
								sx,
								w,
								ey
							} = before
							return {
								w: 100,
								x: sx + 10,
								y: 155
							}
						}
					}
					// 作品简介
					let goodsTitle = {
						type: 'text',
						text: '    ' + Obj.certificate_text,
						font: {
							size: 23
						},
						line: {
							height: 26,
						},
						callBack: (before) => {
							let {
								sx,
								w,
								ey
							} = before
							return {
								w: 484,
								x: sx + 102,
								y: 190
							}
						}
					}


					return [goodsImg, goodsTitle, goodsPrice]
				})
				if (!res.success) return
				this.posterImg = res.data
				this.show = true
			},

			// 跳转到地址
			headleAddress() {
				if (!this.Obj.is_submit) {
					// uni.navigateTo({
					// 	url: '../location/index?id=' + this.Obj.id + '&color=' + this.Obj.color + '&phone=' + this.Obj.phone
					// })
				}else{
					uni.navigateTo({
						url:'../paysuccess/index?id=' + this.Obj.id + '&color=' + this.Obj.color + '&phone=' + this.Obj.phone
					})
				}

			},


			handlerShow() {
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.credential {
		padding-bottom: 400upx;

		.roof {
			width: 100%px;
			height: 270upx;
			padding-top: 178upx;
			box-sizing: border-box;

			.tabbar {
				display: flex;
				width: 100%;
				height: 92upx;
				text-align: center;
				border-radius: 40upx 40upx 0px 0px;
				background-color: rgba(255, 255, 255, 0.30);
				color: rgba(255, 255, 255, 100);
				font-size: 28upx;

				.item {
					position: relative;
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #000;
					color: rgba(255, 255, 255, 100);
					font-size: 14px;

					view {
						position: absolute;
						z-index: 99;
					}

					.active {
						color: rgba(25, 28, 36, 100);
						font-size: 34upx;
						font-weight: 600;
					}

					image {
						position: absolute;
						width: 440upx;
						height: 100upx;
					}

					.le {
						left: 0;
						top: -6upx;
					}

					.ri {
						right: 0;
						top: -6upx;
					}
				}
			}
		}

		.container {
			.electronic {
				margin: 120upx 30upx 0upx;

				.le {
					.bor {
						width: 690upx;
						height: 488upx;
						background-color: #FFFFFF !important;
						box-shadow: none !important;

						image {
							width: 100%;
							height: 100%;
						}

						.name {
							top: 145upx;
						}

						.works {
							top: 190upx;
							line-height: 24upx;
						}

					}

					.hint {
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;
						margin-top: 20upx;
					}
				}
			}

			.paper {
				.certificate {
					margin: 80upx 60upx 60upx;
					border-top: 2upx solid rgba(240, 240, 240, 100);
				}

				.contain {
					.cost {
						margin:0upx auto 30upx;
						color: rgba(25, 28, 36, 100);
						font-size: 30upx;
						width: 650upx;
						view {
							margin: 0upx 6upx;
							display: inline;
							font-weight: 700;
						}
					}

					.con_box {
						text-align: center;
						display: flex;
						justify-content: center;

						view:not(:last-child) {
							margin-right: 10upx;
						}

						.prize {
							color: rgba(0, 0, 0, 0.4);
							font-size: 24upx;

							image {
								width: 110upx;
								height: 110upx;
							}
						}
					}

					.datu {
						width: 630upx;
						height: 766upx;
						margin: 40upx auto 0upx;

						image {
							width: 100%;
							height: 100%;
						}
					}


				}


			}

			.bor {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630upx;
				height: 450upx;
				border-radius: 16upx;
				background-color: rgba(244, 128, 104, 100);
				box-shadow: 0px 16upx 24upx 0px rgba(0, 0, 0, 0.1);

				image {
					width: 598upx;
					height: 422upx;
				}

				view {
					position: absolute;
					color: rgba(38, 38, 38, 100);
					font-size: 22upx;
				}

				.name {
					top: 136rpx;
					left: 108upx;
					font-size: 20upx;
				}

				.works {
					text-indent: 26upx;
					top: 178upx;
					width: 430upx;
					line-height: 24upx;
				}
			}
		}

		.canvas {
			position: fixed;
			top: -99999999999rpx;
			left: -99999999999rpx;
			z-index: -99999999999;
			opacity: 0;
		}

		.poster-img {
			width: 690rpx;
			height: auto;
			margin: 0 auto;
			height: 488upx;

			.img {
				width: 100%;
				height: 100%;
			}

			view {
				background-color: #fff;
				margin-top: 30upx;
				padding: 20upx;
				border-radius: 20upx;
				text-align: center;
				font-size: 30upx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 160upx;
			border-radius: 30upx 30upx 0px 0px;
			box-shadow: 0px -6upx 12upx 0px rgba(0, 0, 0, 0.05);
			background-color: #fff;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					width: 334upx;
					height: 100upx;
					line-height: 100upx;
					border-radius: 60upx;
					text-align: center;
					box-sizing: border-box;
				}

				view:first-child {
					margin-right: 20upx;
				}

				view:last-child {
					color: #fff;
					font-weight: 600;
				}
			}

			.item1 {
				width: 670upx;
				height: 100upx;
				line-height: 100upx;
				border-radius: 60upx;
				background-color: #999;
				color: rgba(255, 255, 255, 100);
				text-align: center;
				box-shadow: 0upx 0upx 4upx 0upx #999;
				border: 2upx solid rgba(0, 0, 0, 0.05);
				font-weight: 600;
				box-sizing: border-box;

			}
		}
	}
</style>
